<template>
    <div class="tree">
        <el-tree ref="treeone" :data="treeData" :default-expanded-keys="[2,3]" node-key="id" :props="defaultProps" :check-strictly="true"
            :highlight-current="true" :expand-on-click-node="false" @node-click="handleNodeClick" @node-contextmenu="rMenu" />
        <!-- <div v-if="r_menu_show" ref="r_menu_ref" class="r_menu" :style="{'left':r_menu_style.x+'px','top':r_menu_style.y+'px'}"
            @mouseover="r_menu_over" @mouseleave="r_menu_leave">
            <div><a v-if="r_menu_info.type == 0" @click="go_menu('add_building')">新增楼栋</a></div>
            <div><a v-if="r_menu_info.type == 1" @click="go_menu('up_building')">修改楼栋</a></div>
            <div><a v-if="r_menu_info.type == 1" @click="go_menu('delete_building')">删除楼栋</a></div>
            <div><a v-if="r_menu_info.type == 1 && (r_menu_info.list.length == 0 || r_menu_info.list[0].type != 3)"
                    @click="go_menu('add_unit')">新增单元</a></div>
            <div><a v-if="r_menu_info.type == 2" @click="go_menu('up_unit')">修改单元</a></div>
            <div><a v-if="r_menu_info.type == 2" @click="go_menu('delete_unit')">删除单元</a></div>
            <div><a v-if="r_menu_info.type == 2" @click="go_menu('add_floor')">新增楼层</a></div>
            <div><a v-if="r_menu_info.type == 1 &&  (r_menu_info.list.length == 0 || r_menu_info.list[0].type != 2)"
                    @click="go_menu('add_floor')">新增楼层</a></div>
            <div><a v-if="r_menu_info.type == 3" @click="go_menu('up_floor')">修改楼层</a></div>
            <div><a v-if="r_menu_info.type == 3" @click="go_menu('delete_floor')">删除楼层</a></div>
        </div> -->
    </div>
</template>

<script>
import { getTreeHouseList } from '@/api/assets'// 请求数据
// import { fetchTree } from '@/api/sys'
import { treeDataTranslate } from '@/utils'
export default {
    data () {
        return {
            historyId: '',
            treeData: [],
            defaultExpandedKeys: [],
            defaultProps: {
                children: 'list',
                label: 'storeyName'
            },
            r_menu_show: false,
            r_menu_style: {
                x: 0,
                y: 0
            },
            r_menu_timing: null,
            r_menu_info: null

        }
    },
    computed: {
        userInfo: {
            get () {
                return this.$store.state.user.userInfo
            }
        }
    },
    created () {
        this.getTree()
    },
    mounted () {

    },
    methods: {
        async getTree () {
            // const params = Object.assign({
            //     // name: this.filtrateForm.name
            // }, this.listQuery)
            // 请求
            const res = await getTreeHouseList().catch(e => { })
            // 失败
            if (!res) { this.listLoading = false; return }
            // 成功
            const { data, code, message } = res

            this.treeData = treeDataTranslate(data, 'id', 'parentId')

            this.treeData = this.set_tree(this.treeData)

            this.$nextTick(() => {
                this.$refs['treeone'].setCurrentKey(this.historyId)
            })
        },
        set_tree (data) {
            function treeArr (arr) {
                arr.forEach((item, index) => {
                    if (item.name) item.storeyName = item.name;
                    if (item.list && item.list.length > 0) {
                        treeArr(item.list)
                    }
                })
                return arr
            }
            let res = treeArr(data)
            return res
        },
        // 右键菜单
        rMenu (e, data, node) {
            Object.assign
            const info = Object.assign(data, e)
            console.log(info)
            this.r_menu_info = info
            this.r_menu_show = true
            this.r_menu_style.x = e.x - 5
            this.r_menu_style.y = e.y - 5
        },
        // 关闭右键
        r_menu_leave () {
            this.r_menu_timing = setTimeout(() => {
                this.r_menu_show = false
                this.r_menu_info = null
            }, 500)
        },
        // 禁止关闭右键
        r_menu_over () {
            clearInterval(this.r_menu_timing)
        },
        go_menu (e) {
            // up_building">修改楼栋
            // add_unit">新增单元
            // up_unit">修改单元
            // delete_unit">删除单元
            // add_floor">新增楼层
            // up_floor">修改楼层
            // delete_floor">删除楼层
            const info = {
                type: e,
                node: Object.assign({ addtype: e }, this.r_menu_info)

            }
            this.$emit('go_menu', info)
        },

        handleNodeClick (data) {
            // console.log(this.$refs.tree.getCurrentKey());
            // console.log("------------",data)
            this.$emit('set-tree-data', data)
        },
        currentClick (id) {
            this.historyId = id
            this.$nextTick(() => {
                this.$refs['treeone'].setCurrentKey(id)
            })
        }

    }
}
</script>

<style lang="scss" scoped>
.tree {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
.r_menu {
    width: 120px;
    /* height: 200px; */
    border-radius: 8px;
    background: #fff;
    position: fixed;
    top: 100px;
    left: 400px;
    z-index: 9999;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
    padding: 10px;
    box-sizing: border-box;

    a {
        display: inline-block;
        width: 100%;
        line-height: 30px;
        text-align: center;
        font-size: 14px;
    }
    a:hover {
        background: #f5f5f5;
    }
    a:active {
        background: #e7e7e7;
    }
}
</style>
